<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div align="center">
		<h2>菜单树形显示查询结果</h2>
		<form name="f">
			<table>
				<tr>
					<td><input type="hidden" name="menuName"></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input type="hidden" value="查询" onclick="query()"></td>
				</tr>
			</table>
		</form>
	</div>
	<hr>
	<div id="showTable"></div><!-- 用来显示查询的结果 -->
	<div id="upd"></div><!-- 用来显示修改界面 -->
</body>
<script type="text/javascript">
	query();
	function query(){
		var menuName = f.menuName.value;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuQueryServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuName : menuName},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "";
				for(var i = 0;i<data.length;i++){
					if((data[i].menuLevel).length == 3){
						str += "<div id='flip1' onclick='findMenu("+data[i].menuLevel+")'>"+data[i].menuName+"</div>";
						str += "<div id='"+data[i].menuLevel+"' ></div>";
					}
					
				}
			$("#showTable").html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function findMenu(menuLevel){
		var level = "00"+menuLevel;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuNextQueryServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuLevel : menuLevel},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "";
				for(var i = 0;i<data.length;i++){
						str += "<div><table><tr><td>--"+data[i].menuName+"    "+data[i].menuState+"</td><td><a href='#' onclick='goUpd("+data[i].menuId+")' >修改</a></td><td><a href='#' onclick='doDel("+data[i].menuId+")' >删除</a></td></tr></table></div>";
				}
				$("#"+level).html(str);
				$("#"+level).slideToggle("slow");
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function doDel(menuId){
		if(confirm("确认删除？")){
			$.ajax({
				type:"post",//设置提交方式
				url:"${pageContext.request.contextPath}/servlet/MenuDelServlet",
				async:true,//表示进行异步执行
				dataType:"json",//数据的返回类型
				data:{menuId : menuId},
				success:function(data){//data就是成功之后 Servlet返回的结果
					if(data[0].result){
						alert("删除成功！");
						query(0);
					}else{
						alert("删除失败");
					}
				},
				error:function(err){
					alert("操作失败");
				}
			});
		}
	}
	function goUpd(menuId) {
		$("#upd").show();
		$.ajax({// 进行提交
			type : "post",// 提交方式
			url : "${pageContext.request.contextPath}/servlet/FindByMenuIdServlet",// 提交路径
			async : true,// 是否异步
			dataType : 'json',// 数据格式（不进行跨越json，进行跨越jsonp）
			data : {
				menuId : menuId,
			},
			success : function(data) {// 执行成功后调动的方法
				var content = "<hr/>";
				content += "<form name='h' action=''><input type='hidden' name='menuId' value='"+data[0].menuId+"'><table><caption>修改菜单</caption>";
			 	content += "<tr><td align='right'>菜单名称：</td><td><input type='text' name='menuName' value='"+data[0].menuName+"'></td></tr>";
			 	content += "<tr><td align='right'>菜单描述：</td><td><input type='text' name='menuDescribe' value='"+data[0].menuDescribe+"'></td></tr>";
			 	if(data[0].menuState == 1){
			 		content += "<tr><td align='right'>菜单状态：</td><td><input type='radio' name='menuState' value='1' checked='checked'>可用<input type='radio' name='menuState' value='0'>不可用</td></tr>";
			 	}else{
			 		content += "<tr><td align='right'>菜单状态：</td><td><input type='radio' name='menuState' value='1' >可用<input type='radio' name='menuState' value='0' checked='checked'>不可用</td></tr>";
			 	}
			 	content += "<tr><td align='right'>菜单路径：</td><td><input type='text' name='menuUrl' value='"+data[0].menuUrl+"'></td></tr>";
			 	content += "<tr><td align='right'>菜单等级：</td><td><input type='text' name='menuLevel' value='"+data[0].menuLevel+"'></td></tr>";
				content += "<tr><td colspan='2' align='center'><input type='button' value='修改' onclick='doUpd()'></td></tr></table></form>";
			 	$("#upd").html(content);
			},
			error : function(err) {// 执行失败后的失败信息的显示
				alert("操作失败");
			}
		});
	}
	function doUpd(){
		var menuId = h.menuId.value;
		var menuName = h.menuName.value;
		var menuState = h.menuState.value;
		var menuDescribe = h.menuDescribe.value;
		var menuUrl = h.menuUrl.value;
		var menuLevel = h.menuLevel.value;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuUpdServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuId:menuId , menuName:menuName , menuState:menuState , menuDescribe:menuDescribe , menuUrl:menuUrl , menuLevel:menuLevel },//传递参数
			success:function(data){//data就是成功之后 Servlet返回的结果
					if(data[0].result){
						alert("修改成功！");
						query();
					}else{
						alert("修改失败");
					}
			},
			error:function(err){
				alert("操作失败");
			}
			
		});
	} 
</script>
</html>